<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>URL 对象</title>
	</head>
	<body>
		<!-- 内建的 URL 类提供了用于创建和解析 URL 的便捷接口 -->

		<script>
			// 1. 创建 URL 对象
			// const url = new URL(url, [base])
			// url：完整的URL，或者仅路径（如果设置了base）。
			// base：可选的默认URL，如果设置该参数，且url只有路径，则会根据这个base生成URL。
			// 例子：下面两种写法完全相同。
			let url1 = new URL('https://javascript.info/profile/admin')
			let url2 = new URL('/profile/admin', 'https://javascript.info')
			console.log(url1.toString(), url2.toString()) // https://javascript.info/profile/admin https://javascript.info/profile/admin

			// 2. URL 对象的属性：
			// url1.href 整段地址。
			// url1.origin 协议 + 域名 + 端口。
			// url1.host 域名 + 端口。
			// url1.protocol 协议。
			// url1.hostname 域名。
			// url1.port 端口。
			// url1.pathname 路径。
			// url1.search 查询字符串(参数)。
			// url1.hash 锚点(#hash)。
		</script>

		<script>
			// 我们可以将 URL 对象传递给网络（和大多数其他）方法，而不是字符串。因为大多数方法都会执行字符串转换，这会将 URL 对象转换为具有完整 URL 的字符串。
		</script>

		<script>
			// SearchParams"?..."
			// 提交的参数中，如果有空格、非拉丁字母等，参数就需要被编码。
			const url = new URL('https://google.com/search?query=JavaScript')
			url.searchParams.set('query', 'HTML') // set 设置参数，如果有同名参数会被覆盖
			url.searchParams.set('color', 'b l a c k : #') // 其中 空格 : # 都会被自动编码
			console.log(url.toString())
			// 遍历参数
			for (const [name, value] of url.searchParams) {
				console.log(`${name} = ${value}`)
			}
		</script>
	</body>
</html>
